<div *ngIf="!isLoading">
  <div *ngIf="dataElement && dataElement.categoryCombo && dataElement.categoryCombo.categoryOptionCombos">
    <div *ngIf="formLayout === 'tableLayout' || formLayout === 'customLayout'" padding-bottom>
      <table class="table table-bordered" width="100%">
        <thead>
          <tr>
            <th [attr.colspan]="dataElement.categoryCombo.categoryOptionCombos.length" (click)="showTooltips(dataElement,'')">
              {{fieldLabelKey}}
              <span *ngIf="dataElement.description">&nbsp;&nbsp;
                <ion-icon color="icon-color" name="help-circle"></ion-icon>
              </span>
            </th>
          </tr>
          <tr *ngIf="dataElement.categoryCombo.name !='default'">
            <th *ngFor="let categoryOptionCombo of dataElement.categoryCombo.categoryOptionCombos;trackBy: trackByFn"
              (click)="showTooltips(dataElement,categoryOptionCombo.name)" class="inputLabel">
              {{ categoryOptionCombo.name }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th *ngFor="let categoryOptionCombo of dataElement.categoryCombo.categoryOptionCombos;trackBy: trackByFn">
              <div *ngIf="dataElement.optionSet" [ngClass]="(dataValuesSavingStatusClass[dataElement.id +'-'+categoryOptionCombo.id])?dataValuesSavingStatusClass[dataElement.id +'-'+categoryOptionCombo.id]:'input-field-container'">
                <option-set-input-field [dataEntrySettings]="dataEntrySettings" (onChange)="updateValue($event)"
                  [optionListTitle]="fieldLabelKey + ' ' + categoryOptionCombo.name" [dataElementId]="dataElement.id"
                  [categoryOptionComboId]="categoryOptionCombo.id" [data]="data" [options]="dataElement.optionSet.options"></option-set-input-field>
              </div>
              <div *ngIf="!dataElement.optionSet" [ngClass]="(dataValuesSavingStatusClass[dataElement.id +'-'+categoryOptionCombo.id])?dataValuesSavingStatusClass[dataElement.id +'-'+categoryOptionCombo.id]:'input-field-container'">
                <div *ngIf="textInputField.indexOf(dataElement.valueType) > -1">
                  <text-input-field (onChange)="updateValue($event)" [dataElementId]="dataElement.id"
                    [categoryOptionComboId]="categoryOptionCombo.id" [data]="data" [barcodeSettings]="barcodeSettings"
                    [valueType]="dataElement.valueType"></text-input-field>
                </div>
                <div *ngIf="numericalInputField.indexOf(dataElement.valueType) > -1">
                  <numerical-input-field (onChange)="updateValue($event)" [dataElementId]="dataElement.id"
                    [categoryOptionComboId]="categoryOptionCombo.id" [data]="data" [barcodeSettings]="barcodeSettings"
                    [valueType]="dataElement.valueType"></numerical-input-field>
                </div>
                <div *ngIf="dataElement.valueType === 'DATE' || dataElement.valueType === 'DATETIME' || dataElement.valueType === 'TIME' ">
                  <date-input-field (onChange)="updateValue($event)" [valueType]="dataElement.valueType"
                    [dataElementId]="dataElement.id" [categoryOptionComboId]="categoryOptionCombo.id" [data]="data"></date-input-field>
                </div>
                <div *ngIf="dataElement.valueType === 'TRUE_ONLY'">
                  <true-only-input-field (onChange)="updateValue($event)" [dataElementId]="dataElement.id"
                    [categoryOptionComboId]="categoryOptionCombo.id" [data]="data"></true-only-input-field>
                </div>
                <div *ngIf="dataElement.valueType === 'BOOLEAN'">
                  <boolean-input-field (onChange)="updateValue($event)" [dataElementId]="dataElement.id"
                    [categoryOptionComboId]="categoryOptionCombo.id" [data]="data"></boolean-input-field>
                </div>
                <div *ngIf="dataElement.valueType === 'AGE'">
                  <age-input (onChange)="updateValue($event)" [dataElementId]="dataElement.id" [categoryOptionComboId]="categoryOptionCombo.id"
                    [data]="data"></age-input>
                </div>
                <div *ngIf="dataElement.valueType === 'COORDINATE'">
                  <coordinate-input (onChange)="updateValue($event)" [dataElementId]="dataElement.id"
                    [categoryOptionComboId]="categoryOptionCombo.id" [data]="data"></coordinate-input>
                </div>
                <div *ngIf="dataElement.valueType === 'ORGANISATION_UNIT'">
                  <organisation-unit-input (onChange)="updateValue($event)" [dataElementId]="dataElement.id"
                    [categoryOptionComboId]="categoryOptionCombo.id" [data]="data"></organisation-unit-input>
                </div>
                <div *ngIf="dataElement.valueType === 'UNIT_INTERVAL'">
                  <unit-interval-input (onChange)="updateValue($event)" [dataElementId]="dataElement.id"
                    [categoryOptionComboId]="categoryOptionCombo.id" [data]="data">
                  </unit-interval-input>
                </div>
                <div *ngIf="dataElement.valueType === 'PERCENTAGE'">
                  <percentage-input (onChange)="updateValue($event)" [dataElementId]="dataElement.id"
                    [categoryOptionComboId]="categoryOptionCombo.id" [data]="data"></percentage-input>
                </div>
                <div *ngIf="dataElement.valueType === 'EMAIL'">
                  <email-input (onChange)="updateValue($event)" [(dataValuesSavingStatusClass)]="dataValuesSavingStatusClass"
                    [dataElementId]="dataElement.id" [categoryOptionComboId]="categoryOptionCombo.id" [data]="data">
                  </email-input>
                </div>
                <div *ngIf="dataElement.valueType === 'PHONE_NUMBER'">
                  <phone-number-input (onChange)="updateValue($event)" [(dataValuesSavingStatusClass)]="dataValuesSavingStatusClass"
                    [dataElementId]="dataElement.id" [categoryOptionComboId]="categoryOptionCombo.id" [data]="data">
                  </phone-number-input>
                </div>

                <div *ngIf="supportValueTypes.indexOf(dataElement.valueType) === -1">
                  <div padding>
                    Currently '{{ dataElement.valueType.toLocaleLowerCase().replace('/_/g',' ')}}' as value type is not
                    supported
                  </div>
                </div>
              </div>

            </th>
          </tr>
        </tbody>
      </table>

    </div>
    <div *ngIf="formLayout === 'listLayout'">
      <div *ngFor="let categoryOptionCombo of dataElement.categoryCombo.categoryOptionCombos;trackBy: trackByFn">
        <div (click)="showTooltips(dataElement,categoryOptionCombo.name)" class="inputLabel">
          {{ getListLayoutLabel(dataElement.categoryCombo.name,categoryOptionCombo.name)}}
          <span *ngIf="dataElement.description">&nbsp;&nbsp;
            <ion-icon color="icon-color" name="help-circle"></ion-icon>
          </span>
        </div>

        <div *ngIf="dataElement.optionSet" [ngClass]="(dataValuesSavingStatusClass[dataElement.id +'-'+categoryOptionCombo.id])?dataValuesSavingStatusClass[dataElement.id +'-'+categoryOptionCombo.id]:'input-field-container'">
          <option-set-input-field [dataEntrySettings]="dataEntrySettings" (onChange)="updateValue($event)"
            [optionListTitle]="fieldLabelKey + ' ' + categoryOptionCombo.name" [dataElementId]="dataElement.id"
            [categoryOptionComboId]="categoryOptionCombo.id" [data]="data" [options]="dataElement.optionSet.options"></option-set-input-field>
        </div>
        <div *ngIf="!dataElement.optionSet" [ngClass]="(dataValuesSavingStatusClass[dataElement.id +'-'+categoryOptionCombo.id])?dataValuesSavingStatusClass[dataElement.id +'-'+categoryOptionCombo.id]:'input-field-container'">
          <div *ngIf="textInputField.indexOf(dataElement.valueType) > -1">
            <text-input-field (onChange)="updateValue($event)" [dataElementId]="dataElement.id" [categoryOptionComboId]="categoryOptionCombo.id"
              [data]="data" [barcodeSettings]="barcodeSettings" [valueType]="dataElement.valueType"></text-input-field>
          </div>
          <div *ngIf="numericalInputField.indexOf(dataElement.valueType) > -1">
            <numerical-input-field (onChange)="updateValue($event)" [dataElementId]="dataElement.id"
              [categoryOptionComboId]="categoryOptionCombo.id" [data]="data" [barcodeSettings]="barcodeSettings"
              [valueType]="dataElement.valueType"></numerical-input-field>
          </div>

          <div *ngIf="dataElement.valueType === 'DATE'">
            <date-input-field (onChange)="updateValue($event)" [dataElementId]="dataElement.id" [categoryOptionComboId]="categoryOptionCombo.id"
              [data]="data"></date-input-field>
          </div>
          <div *ngIf="dataElement.valueType === 'TRUE_ONLY'">
            <true-only-input-field (onChange)="updateValue($event)" [dataElementId]="dataElement.id"
              [categoryOptionComboId]="categoryOptionCombo.id" [data]="data"></true-only-input-field>
          </div>
          <div *ngIf="dataElement.valueType === 'BOOLEAN'">
            <boolean-input-field (onChange)="updateValue($event)" [dataElementId]="dataElement.id"
              [categoryOptionComboId]="categoryOptionCombo.id" [data]="data"></boolean-input-field>
          </div>
          <div *ngIf="dataElement.valueType === 'COORDINATE'">
            <coordinate-input (onChange)="updateValue($event)" [dataElementId]="dataElement.id" [categoryOptionComboId]="categoryOptionCombo.id"
              [data]="data"></coordinate-input>
          </div>
          <div *ngIf="dataElement.valueType === 'ORGANISATION_UNIT'">
            <organisation-unit-input (onChange)="updateValue($event)" [dataElementId]="dataElement.id"
              [categoryOptionComboId]="categoryOptionCombo.id" [data]="data"></organisation-unit-input>
          </div>
          <div *ngIf="dataElement.valueType === 'UNIT_INTERVAL'">
            <unit-interval-input (onChange)="updateValue($event)" [dataElementId]="dataElement.id"
              [categoryOptionComboId]="categoryOptionCombo.id" [data]="data">
            </unit-interval-input>
          </div>
          <div *ngIf="dataElement.valueType === 'PERCENTAGE'">
            <percentage-input (onChange)="updateValue($event)" [dataElementId]="dataElement.id" [categoryOptionComboId]="categoryOptionCombo.id"
              [data]="data"></percentage-input>
          </div>
          <div *ngIf="dataElement.valueType === 'EMAIL'">
            <email-input (onChange)="updateValue($event)" [(dataValuesSavingStatusClass)]="dataValuesSavingStatusClass"
              [dataElementId]="dataElement.id" [categoryOptionComboId]="categoryOptionCombo.id" [data]="data">
            </email-input>
          </div>
          <div *ngIf="dataElement.valueType === 'PHONE_NUMBER'">
            <phone-number-input (onChange)="updateValue($event)" [(dataValuesSavingStatusClass)]="dataValuesSavingStatusClass"
              [dataElementId]="dataElement.id" [categoryOptionComboId]="categoryOptionCombo.id" [data]="data">
            </phone-number-input>
          </div>

          <div *ngIf="supportValueTypes.indexOf(dataElement.valueType) === -1">
            <div padding>
              Currently '{{ dataElement.valueType.toLocaleLowerCase().replace('/_/g',' ')}}' as value type is not
              supported
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
